<template>
	<div class="app-container">
		<list-frames :loading="loading">
			<el-form slot="form" :model="queryData" ref="queryForm" size="small" :inline="true" v-if="showSearch">
				<el-form-item prop="userName">
					<el-input v-model="queryData.userName" placeholder="请输入姓名" clearable style="width: 180px" />
				</el-form-item>
				<el-form-item prop="punishmentDate">
					<el-date-picker
						clearable
						type="date"
						style="width: 160px"
						value-format="yyyy-MM-dd"
						placeholder="请选择追责日期"
						v-model="queryData.punishmentDate"
					></el-date-picker>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" icon="el-icon-search" @click="queryTableData()">搜索</el-button>
				</el-form-item>
				<el-form-item>
					<el-button icon="el-icon-refresh" @click="handleResetQuery()">重置</el-button>
				</el-form-item>
			</el-form>
			<template slot="button">
				<el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleOpenDialog()" v-hasPermi="['spm:punishment:add']">新增</el-button>
				<template v-if="checkedIds.length > 0">
					<el-button type="danger" plain icon="el-icon-delete" size="mini" @click="handleDeleteData()" v-hasPermi="['spm:punishment:remove']">
						删除
					</el-button>
				</template>
				<el-button
					plain
					size="mini"
					type="warning"
					icon="el-icon-download"
					v-hasPermi="['spm:punishment:export']"
					@click="handleExportData('punishment')"
				>
					导出
				</el-button>
			</template>
			<right-toolbar slot="handle" :showSearch.sync="showSearch" @queryTable="queryTableData()"></right-toolbar>
			<el-table slot="table" height="100%" :data="tableData" @selection-change="handleSelectionChange($event, 'punishmentId')">
				<el-table-column type="selection" width="42" align="center" />
				<el-table-column label="姓名" prop="userName" min-width="120" />
				<el-table-column label="追责日期" min-width="120">
					<template slot-scope="scope">
						<span>{{ parseTime(scope.row.punishmentDate, '{y}-{m}-{d}') }}</span>
					</template>
				</el-table-column>
				<el-table-column label="追责说明" prop="des" min-width="360" show-overflow-tooltip />
				<el-table-column label="操作" width="116" class-name="small-padding fixed-width">
					<template slot-scope="{ row }">
						<el-button type="text" icon="el-icon-edit" @click="handleOpenDialog(row.punishmentId)" v-hasPermi="['spm:punishment:edit']">
							修改
						</el-button>
						<el-button type="text" icon="el-icon-delete" @click="handleDeleteData(row.punishmentId)" v-hasPermi="['spm:punishment:remove']">
							删除
						</el-button>
					</template>
				</el-table-column>
			</el-table>
			<template slot="page" v-if="dataCount > 0">
				<pagination :total="dataCount" :page.sync="queryData.pageNum" :limit.sync="queryData.pageSize" @pagination="queryTableData()" />
			</template>
		</list-frames>
		<form-dialog v-model="formDialog" :data-id="dataId" @finish="queryTableData()"></form-dialog>
	</div>
</template>

<script>
import formDialog from './form';
import listMixins from '../common/listMixins';
import { listPunishment, delPunishment } from '@/api/personnal/punishment';

export default {
	name: 'Punishment',
	mixins: [listMixins],
	components: { formDialog },
	data() {
		return {
			pageName: '追责管理'
		};
	},
	computed: {
		userId() {
			return this.$route.query.id;
		},
		delFunction() {
			return eval(delPunishment);
		},
		exportUrl() {
			return 'spm/punishment/export';
		}
	},
	methods: {
		//获取列表数据
		async getTableData() {
			let params = { ...this.queryData };
			let result = await listPunishment(params);
			this.loading = false;
			if (result.code === 200) {
				this.dataCount = result.total;
				this.tableData = result.rows || [];
			}
		}
	}
};
</script>
